<template>
  <div>
    <Row>
      <Card>
        <p slot="title">
          <Icon type="navicon-round"></Icon>
          信息服务费设置
        </p>
        <VmBtable type="edit" ref="VmBtable"
                  :columns="dataColumns"
                  :data="dataTable"
                  :searchparam="searchParam"
                  :exportBtn="false"
                  :importBtn="false"
                  :batchDelBtn="false"
                  :downTemplate="false"
                  v-on:searchFn="searchFn"
                  v-on:page-change="pageChangeFn"
                  v-on:addFn="addFn"
                  v-on:editFn="editFn"
                  v-on:deleteFn="deleteFn"
                  placeholder="名称关键字"
                  searchText="名称："
                  cleanText="刷新"
                  exportPath="exportPath"
                  v-on:restFn="restFn">
          <div slot="search" class="db_inline">
          </div>
        </VmBtable>
      </Card>
    </Row>
    <Modal v-model="modal.visible" :title="modal.title" v-on:on-ok="subForm" :mask-closable="false" width="580"
           v-on:on-cancel="modal.visible=false">
      <Form ref="Form" :model="modal.form" :label-width="100" label-position="right" :rules="modal.rules">
        <FormItem label="名称" prop="name">
          <Input v-model="modal.form.name" placeholder="请输入名称" style="width:63%"/>
        </FormItem>
        <FormItem label="使用时长" prop="type">
          <RadioGroup v-model="modal.form.type" type="button">
            <Radio label="month">一个月</Radio>
            <Radio label="term">一学期</Radio>
<!--            <Radio label="year">一学年</Radio>-->
            <Radio label="customize">自定义</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="月数" prop="month" v-if="modal.form.type==='customize'">
          <InputNumber :max="12" :min="1" v-model="modal.form.number"></InputNumber>
          月
        </FormItem>
        <div>
          <FormItem label="服务费用" prop="initMoney" class="db_inline">
            <InputNumber :max="500" :min="0" :step="0.1" @on-change="initChange"
                         v-model="modal.form.initMoney"></InputNumber>
            元
          </FormItem>
          <FormItem label="折扣" prop="discount" class="db_inline">
            <InputNumber :max="10" :min="5" @on-change="discountChange" :step="0.1"
                         v-model="modal.form.discount"></InputNumber>
            折
          </FormItem>
          <FormItem label="折后费用" prop="discount" class="db_inline">
            <InputNumber :max="10" :min="0" :step="0.1" v-model="modal.form.lastMoney"></InputNumber>
            元
          </FormItem>
          <FormItem label="热门推荐" prop="hot" class="db_inline">
            <RadioGroup v-model="modal.form.hot">
              <Radio :label="1">热门推荐</Radio>
              <Radio :label="0">非热门推荐</Radio>
            </RadioGroup>
          </FormItem>
        </div>
        <div>
          <FormItem label="状态" prop="enable" class="db_inline">
            <RadioGroup v-model="modal.form.enable">
              <Radio :label="1">启用</Radio>
              <Radio :label="0">停用</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="排序" prop="ord" class="db_inline">
            <InputNumber :max="20" :min="1" style="width: 50px" v-model="modal.form.ord"></InputNumber>
            数字越小排序越靠前
          </FormItem>
        </div>
      </Form>
      <div slot="footer">
        <Button type="text" @click="modal.visible=false">取消</Button>
        <Button type="primary" @click="subForm" :loading="modal.loading">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import API from "@/api/api";
  import VmBtable from "@/components/vm/vm-btable";
  import Cookie from "js-cookie"

  export default {
    components: {
      VmBtable
    },
    data() {
      return {
        searchParam: {
          current: 1,
          size: 20,
          total: 0,
          name: '',
        },
        exportPath: Cookie.getJSON('cdnUrl'),
        dataColumns: [
          {
            title: '序号',
            type: 'index',
            align: 'center',
            width: 100
          },
          {title: '名称', key: 'name', align: 'center', minWidth: 130},
          {
            title: '类型', key: 'type', align: 'center', minWidth: 130, render: (h, param) => {
              let typeList = [
                {type: 'month', desc: '月'},
                {type: 'term', desc: '学期'},
                {type: 'customize', desc: 'customize'},
              ];
              let desc = typeList.filter(type => type.type === param.row.type)[0].desc;
              if (desc === 'customize') {
                desc = '自定义（' + param.row.number + '个月）'
              }
              return h('div', {}, desc);
            }
          },
          {title: '初始费用（元）', key: 'initMoney', align: 'center', minWidth: 100},
          {
            title: '折扣（折）', key: 'discount', align: 'center', minWidth: 100, render: (h, param) => {
              let discount = param.row.discount;
              if (discount === 10) {
                return h('div', {}, '无');
              }
              return h('div', {}, discount);
            }
          },
          {title: '最终费用(元)', key: 'lastMoney', align: 'center', minWidth: 100},
          {
            title: '状态', key: 'enable', align: 'center', sortable: true, sortType: 'desc', render: (h, param) => {
              let status = param.row.enable;
              let desc = '启用';
              let color = 'green';
              if (!status) {
                desc = '停用';
                color = 'red';
              }
              return h('div', {style: {color: color}}, desc)
            }
          },
          {
            title: '热门推荐',
            key: 'hot',
            align: 'center',
            sortable: true,
            sortType: 'desc',
            minWidth: 100,
            render: (h, param) => {
              let hot = param.row.hot;
              let desc = '非';
              if (hot) {
                desc = '是';
              }
              return h('div', {}, desc);
            }
          },
        ],
        operate: [],
        dataTable: [],
        modal: {
          visible: false,
          title: '',
          isEdit: false,
          loading: false,
          form: {
            name: '',
            number: 2,
            week: 'month',
            initMoney: 10,
            lastMoney: 10,
            discount: 10,
            enable: 1,
            ord: 1,
            hot: 0,
          },
          rules: {
            'name': [{
              required: true,
              trigger: 'blur',
              message: '必填项'
            }]
          }
        },
      };
    },
    methods: {
      initChange(value) {
        let discount = this.modal.form.discount;
        this.modal.form.lastMoney = parseFloat((value * discount / 10).toFixed(1));
      },
      discountChange(value) {
        let initMoney = this.modal.form.initMoney;
        this.modal.form.lastMoney = parseFloat((value * initMoney / 10).toFixed(1));
      },
      addFn() {
        Object.assign(this.modal, {
          visible: true,
          isEdit: false,
          title: '添加',
          form: {day: 7, 'type': 'month', initMoney: 10, discount: 10, lastMoney: 10, enable: 1, ord: 1, hot: 0}
        })
      },
      editFn(data) {
        Object.assign(this.modal, {
          visible: true,
          isEdit: true,
          title: '编辑',
          form: data
        })
      },
      deleteFn(data) {
        API.deleteProduct({id: data[0].id}).then(resp => {
          this.queryFn();
          this.complete();
        })

      },
      restFn() {
        this.searchParam.current = 1;
        this.searchParam.size = 20;
        this.searchParam.name = '';
        this.queryFn();
      },
      queryFn() {
        API.fetchProduct(this.searchParam).then(
          res => {
            let data = res.data;
            this.dataTable = data.records;
            this.searchParam.total = data.total;
          },
          error => {
            this.$Message.info(error.msg);
          }
        );
      },
      complete() {
        Object.assign(this.modal, {
          visible: false,
          title: '',
          loading: false,
        });
        this.$refs.Form.resetFields();
      },
      subForm() {
        this.$refs.Form.validate(valid => {
          if (valid) {
            let data = Object.assign(this.modal.form);
            if (data.id) {
              API.updateProduct(data).then(resp => {
                this.queryFn();
                this.complete();
              })
            } else {
              API.createProduct(data).then(resp => {
                this.queryFn();
                this.complete();
              })
            }
          }
        })
      },
      pageChangeFn(current) {
        this.searchParam.current = current;
        this.queryFn();
      },
      searchFn(value) {
        this.searchParam.name = value;
        this.queryFn();
      },
    },
    created() {
    },

    mounted() {
      this.queryFn();
    }
  }
</script>

<style scoped>

</style>
